<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>群星网约车</title>
  <!--引入页面的样式-->
  <style>
    /* 样式可根据需求进行调整 */
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      margin: 0;
      padding: 0;
    }

    .header {
      background-color: #007bff;
      color: #fff;
      text-align: center;
      padding: 20px;
    }

    .main {
      padding: 20px;
    }

    .service-item {
      margin-bottom: 20px;
      padding: 20px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }

    .service-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .service-item h3 {
      margin-top: 0;
      font-size: 20px;
      color: #007bff;
    }

    .service-item p {
      margin-bottom: 0;
    }
  </style>
</head>
<!--引入相关的文件-->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
<body>
<div id="app">
  <div class="header">
    <h1>欢迎使用网约车服务</h1>
  </div>
  <div class="main">
    <h2>推荐服务</h2>
    <div class="service">
      <div class="service-item">
        <h3>快捷出行</h3>
        <p>快速预订、轻松支付，快捷到达目的地。</p>
        <el-button type="primary" round>立即预订</el-button>
      </div>
      <div class="service-item">
        <h3>舒适体验</h3>
        <p>豪华车型、贴心服务，让您乘坐更舒适愉快。</p>
        <el-button type="primary" round>立即预订</el-button>
      </div>
      <div class="service-item">
        <h3>安全保障</h3>
        <p>安全驾驶、规范服务，保障您的出行安全。</p>
        <el-button type="primary" round>立即预订</el-button>
      </div>
    </div>
  </div>
</div>

<script>
  // 创建 Vue 实例
  new Vue({
    el: '#app',
    data() {
      return {}
    },
    methods: {},
    mounted() {}
  });
</script>
<!-- 不用 Vue 的 js 代码写在下面-->
<script>

</script>
</body>
</html>
